<template>
  <div id="app">
    <!-- App.vue -->
    <v-app>
      <!-- <v-navigation-drawer app v-model="drawer"> </v-navigation-drawer> -->
      <v-navigation-drawer app v-model="drawer" v-if="showBar">
        <v-list>
          <v-list-item class="px-2">
            <v-list-item-avatar>
              <v-img
                src="https://randomuser.me/api/portraits/women/85.jpg"
              ></v-img>
            </v-list-item-avatar>
          </v-list-item>

          <v-list-item link>
            <v-list-item-content>
              <v-list-item-title class="text-h6">
                Sandra Adams
              </v-list-item-title>
              <v-list-item-subtitle>sandra_a88@gmail.com</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>

        <v-divider></v-divider>

        <v-list nav dense>
          <v-list-item link to="/">
            <v-list-item-icon>
              <v-icon>mdi-home-analytics</v-icon>
            </v-list-item-icon>
            <v-list-item-title>我的主页</v-list-item-title>
          </v-list-item>
          <v-list-item link to="/article">
            <v-list-item-icon>
              <v-icon>mdi-book-variant</v-icon>
            </v-list-item-icon>
            <v-list-item-title>文章管理</v-list-item-title>
          </v-list-item>
          <v-list-item link to="/workClass">
            <v-list-item-icon>
              <v-icon>mdi-bookshelf</v-icon>
            </v-list-item-icon>
            <v-list-item-title>分类管理</v-list-item-title>
          </v-list-item>
          <!-- <v-list-item link to="/user">
            <v-list-item-icon>
              <v-icon>mdi-account-supervisor</v-icon>
            </v-list-item-icon>
            <v-list-item-title>分类管理</v-list-item-title>
          </v-list-item>
          <v-list-item link to="/data">
            <v-list-item-icon>
              <v-icon>mdi-chart-donut</v-icon>
            </v-list-item-icon>
            <v-list-item-title>数据总览</v-list-item-title>
          </v-list-item>
          <v-list-item link to="/data">
            <v-list-item-icon>
              <v-icon>mdi-chart-donut</v-icon>
            </v-list-item-icon>
            <v-list-item-title>前台配置</v-list-item-title>
          </v-list-item>
          <v-list-item link to="/data">
            <v-list-item-icon>
              <v-icon>mdi-chart-donut</v-icon>
            </v-list-item-icon>
            <v-list-item-title>数据配置</v-list-item-title>
          </v-list-item> -->
        </v-list>
      </v-navigation-drawer>
      <v-app-bar app v-if="showBar"
        ><v-app-bar-nav-icon
          @click="drawer = !drawer"
        ></v-app-bar-nav-icon> </v-app-bar
      ><v-main
        ><v-container fluid class="myContainer"
          ><router-view></router-view>
        </v-container>
      </v-main>
      <v-footer app v-if="showBar">
        <v-col class="text-center" cols="12">
          {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
        </v-col></v-footer
      >
    </v-app>
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
  data: () => {
    return { drawer: false, group: null, showBar: true };
  },
  watch: {
    $route: {
      handler(to) {
        if (to && to.name === "Login") {
          this.showBar = false;
        } else {
          this.showBar = true;
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>


<style>
* {
  margin: 0;
  padding: 0;
}
.container {
  height: 100%;
}
</style>
